<template>
<div>
	<div class="g_top_box">
		<div class="g_right_box">
			<!--Button type="primary" @click="import_data">导入数据</Button-->
		</div> 
		<div class="g_left_box"><h4>借支记录表</h4></div>
	</div>
	
	<div class="g_list_box">
		<div class="g_filter_box">
			<Form  :label-width="50" style="width: 100%">
				<Select v-model="filter.company_id" style="width:150px" placeholder="主体公司">
					<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
				
				<DatePicker type="month" placeholder="选择开始月份" style="width: 120px" @on-change="start_change"></DatePicker>
				至
				<DatePicker type="month" placeholder="选择结束月份" :options="options4" style="width: 120px" @on-change="end_change"></DatePicker>
				<Input v-model="filter.region" style="width:150px;" placeholder="地区"></Input>
				<Select v-model="filter.currency" style="width:150px" placeholder="货币">
					<Option :value="0" >人民币</Option>
					<Option v-for="item in currencyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
				
				
				<Button type="primary" @click="qurey">搜索</Button>
				<Button type="primary" @click="export_data" style="float:right;" v-show="list.length>0">导出</Button>
			</Form>
			
		</div>
		<div class="g_list_box">
			<div v-for="val in list">
				<div class="tit_box">
					<h3>{{val.name}}</h3>
				</div>
				<Table :columns="Columns" :data="val.list" style="width: 100%;margin-top: 10px;"  size="small" :border="true" ></Table>
			</div>
		</div>
	</div> 
	
</div>
</template>

<script>
export default {
    name: 'cash_list',
    data () {
		let self = this;
        return {
            Columns: [
				{
					title: '（單位：人民幣）',
					key: 'name',
                    width: 220,
					
                },
            ],
            list: [],
			filter:{
				company_id:0,
				start:'',
				end:'',
				region:'',
				currency:0
			},
			exps:{
				
			},
			exp_total:0,
			companyList:[],
			currencyList:[],
			totals:{
				total:0
			},
			loading:true,
			options4:{
				disabledDate(date) {
					
					if(self.filter.start==''){
						
						return true;
					}
					
					var ls_date = new Date(self.filter.start);
					return date && date.valueOf() < ls_date.valueOf();
				}
			}
        };
    },
	created(){
		
		this.load_company();
		this.load_currency();
	},
    watch: {
		exps:{
			handler(val){
				
			},
			deep:false,
		}
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = this.filter
			
			//currency
			Whttp.load('Report/BorrowSupport/query',postdata,function(result){
				var Columns = [
					{
						title: '（單位：'+result.currency.name+'）',
						key: 'name',
						width: 220,
						
					},
				];
				
				var dates = result.dates;
				for(var i=0;i<dates.length;i++){
					Columns.push({
						title: dates[i].value,
						key: dates[i].name,
						width: 120,
					});
				}
				Columns.push({
					title: "总计",
					key: 'total',
					width: 100,
				});
				Columns.push({
					title: "月平均",
					key: 'equally',
					width: 100,
				});
				Columns.push({
					title: "上年度同期",
					key: 'prev_year',
					width: 100,
				});
				Columns.push({
					title: "同期比较",
					key: 'prev_year_percent',
					width: 100,
					render:(h,params)=>{
						return h('div',params.row.prev_year_percent+'%');
					}
				});
				
				self.Columns = Columns;
				
				self.list = result.data;
			});
		},
		qurey(){
			this.load_data();
		},
		load_company(){
			var self = this;
			
			var postdata = {
				page:1,
				size:1000
			}
			
			Whttp.load('User/Company/get_list',postdata,function(result){
				self.companyList = result.list;
			});
		},
		load_currency(){
			var self = this;
			
			var postdata = {
				page:1,
				size:1000
			}
			
			Whttp.load('User/Currency/get_list',postdata,function(result){
				self.currencyList = result.list;
			});
		},
		start_change(date){
			this.filter.start =  date;
		},
		end_change(date){
			this.filter.end =  date;
		},
		export_data(){
			var self = this;
			var postdata = this.filter;
			
			Whttp.load('Report/BorrowSupport/export_data',postdata,function(result){
				window.open(result);
			});
		}
	}
};
</script>
<style scoped>

</style>